<template>
  <el-row :gutter="24" style="justify-content: center;display: flex; ">

    <el-card class="card"  :class="another === true ? 'another' : 'mine'">
      <div style="flex-direction:column;display: flex; ">
        <img class="avatar" :src="profile.avatar"/>
      </div>
      <div v-if="profile.user" >
        <div style="margin-top: 20px;flex-direction:column;display: flex; ">
          <div v-if="profile.user" class="emphasis">{{profile.user.username}}</div>
          <div v-if="profile.school">@{{profile.school}}</div>
        </div>
        <!-- <p v-if="profile.mood">
          {{profile.mood}}
        </p> -->
        <el-divider></el-divider>

        <div style="display: inline-flex; align-items: center; justify-content:space-around; width: 100%;">
          <div class="card">
            <p>通过题目</p>
            <p class="emphasis">{{profile.accepted_number}}</p>
          </div>
          <div class="card">
            <p>{{$t('m.UserHomeserSubmissions')}}</p>
            <p class="emphasis">{{profile.submission_number}}</p>
          </div>
          <div class="card">
            <p>{{$t('m.UserHomeScore')}}</p>
            <p class="emphasis">{{profile.total_score}}</p>
          </div>
        </div>
        <div id="problems" style="margin-top: 20px;">
          <div v-if="problems.length">{{$t('m.List_Solved_Problems')}}
            <Poptip v-if="refreshVisible" trigger="hover" placement="right-start">
              <Icon type="ios-help-outline"></Icon>
              <div slot="content">
                <p>如果你发现缺少了一些已经通过的题目,<br> 请点击按钮刷新</p>
                <Button type="info" @click="freshProblemDisplayID">刷新</Button>
              </div>
            </Poptip>
          </div>
          <p v-else>{{$t('m.UserHomeIntro')}}</p>
          <div class="btns" style="display:flex;flex-wrap: wrap; ">
            <div class="problem-btn" v-for="problemID of problems" :key="problemID">
              <Button type="ghost" @click="goProblem(problemID)">{{problemID}}</Button>
            </div>
          </div>
        </div>
        <div id="icons" style="margin-top: 20px; display: inline-flex; align-items: center; justify-content:space-around; width: 100%;">
          <a :href="profile.github">
            <Icon type="social-github-outline" size="30"></Icon>
          </a>
          <a :href="'mailto:'+ profile.user.email">
            <Icon class="icon" type="ios-email-outline" size="30"></Icon>
          </a>
          <a :href="profile.blog">
            <Icon class="icon" type="ios-world-outline" size="30"></Icon>
          </a>
        </div>
      </div>
    </el-card>

    <el-card v-if="another ===false" style="width: 70%;margin-left: 50px;">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- <el-tab-pane label="动态" name="first">用户管理</el-tab-pane> -->
        <el-tab-pane label="收藏" name="star">
          <el-switch
            v-model="starType"
            active-text="题目"
            inactive-text="讨论">
          </el-switch>
          <div v-if="!starType">
            <el-table
              :data="starDiscussionList"
              stripe
              @row-click="goStarDiscussion"
              style="width: 100%;">
              <el-table-column
                prop="discussion.discussion_type"
                label="类型"
                :formatter="formatStarType"
                width="80">
              </el-table-column>
              <el-table-column
                prop="discussion.discussion_title"
                label="标题"
                width="280">
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="收藏时间"
                :formatter="formatDate"
                width="180">
              </el-table-column>
              <el-table-column
                prop="discussion.view_number"
                label="阅读"
                width="80">
              </el-table-column>
            </el-table>
            <Pagination 
              :total="starDiscussionTotal" 
              :pageSize="limit"
              @on-change="getStarDiscussionList" 
              :current.sync="starDiscussionPage">
            </Pagination>
          </div>
          <div v-if="starType">
            <el-table
              :data="starProblemList"
              stripe
              @row-click="goStarProblem"
              style="width: 100%">
              <el-table-column
                prop="problem._id"
                label="题号"
                width="80">
              </el-table-column>
              <el-table-column
                prop="problem.title"
                label="标题"
                width="280">
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="收藏时间"
                :formatter="formatDate"
                width="180">
              </el-table-column>
              <el-table-column
                prop="problem.accepted_number"
                label="通过人数"
                width="80">
              </el-table-column>
            </el-table>
            <Pagination 
              :total="starProblemTotal" 
              :pageSize="limit"
              @on-change="getStarProblemList" 
              :current.sync="starProblemPage">
            </Pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="讨论" name="article">
          <el-table
            :data="discussionList"
            stripe
            @row-click="goDiscussion"
            style="width: 100%">
            <el-table-column
              prop="discussion_type"
              label="类型"
              :formatter="formatType"
              width="80">
            </el-table-column>
            <el-table-column
              prop="problem._id"
              label="#"
              width="80">
            </el-table-column>
            <el-table-column
              prop="discussion_title"
              label="标题"
              width="280">
            </el-table-column>
            <el-table-column
              prop="last_edit_time"
              label="时间"
              :formatter="formatDate"
              width="180">
            </el-table-column>
            <el-table-column
              prop="view_number"
              label="阅读"
              width="80">
            </el-table-column>
          </el-table>
          <Pagination 
            :total="discussionTotal" 
            :pageSize="limit"
            @on-change="getDiscussionList" 
            :current.sync="discussionPage">
          </Pagination>
        </el-tab-pane>
        <el-tab-pane label="草稿箱" name="fourth">
          <el-table
            :data="editList"
            stripe
            @row-click="goDiscussion"
            style="width: 100%">
            <el-table-column
              prop="discussion_type"
              label="类型"
              :formatter="formatType"
              width="80">
            </el-table-column>
            <el-table-column
              prop="problem._id"
              label="#"
              width="80">
            </el-table-column>
            <el-table-column
              prop="discussion_title"
              label="标题"
              width="280">
            </el-table-column>
            <el-table-column
              prop="last_edit_time"
              label="时间"
              :formatter="formatDate"
              width="180">
            </el-table-column>
            <el-table-column
              prop="view_number"
              label="阅读"
              width="80">
            </el-table-column>
          </el-table>
          <Pagination 
            :total="editTotal" 
            :pageSize="limit"
            @on-change="getEditList" 
            :current.sync="editPage">
          </Pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-row>
</template>
<script>
  import { mapActions } from 'vuex'
  import time from '@/utils/time'
  import api from '@oj/api'
  import Pagination from '@/pages/oj/components/Pagination'
  const limit = 15
  export default {
    components: {
      Pagination
    },
    data () {
      return {
        username: '',
        profile: {},
        limit: limit,
        problems: [],
        activeName: 'star',
        discussionTotal: 0,
        editTotal: 0,
        starDiscussionTotal: 0,
        starEditTotal: 0,
        discussionList: [],
        editList: [],
        starProblemList: [],
        starDiscussionList: [],
        starDiscussionPage: 1,
        starProblemPage: 1,
        editPage: 1,
        discussionPage: 1,
        starType: 0,
        displayType: {'Solution': '题解', 'Share': '分享', 'Integrated': '问答'},
        another: true
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      ...mapActions(['changeDomTitle']),
      init () {
        this.username = this.$route.query.username
        if (!this.username) {
          this.another = false
        }
        api.getUserInfo(this.username).then(res => {
          this.changeDomTitle({title: res.data.data.user.username})
          this.profile = res.data.data
          this.getSolvedProblems()
          let registerTime = time.utcToLocal(this.profile.user.create_time, 'YYYY-MM-D')
          console.log('The guy registered at ' + registerTime + '.')
        })
        if (this.another === false) {
          this.getDiscussionList()
          this.getEditList()
          this.getStarDiscussionList()
          this.getStarProblemList()
        }
      },
      getDiscussionList (discussionPage = 1) {
        let offset = (discussionPage - 1) * this.limit
        api.getDiscussionList(offset, this.limit, {mine: 1}).then((res) => {
          this.discussionList = res.data.data.results
          this.discussionTotal = res.data.data.total
        })
      },
      getEditList (editPage = 1) {
        let offset = (editPage - 1) * this.limit
        api.getDiscussionList(offset, this.limit, {editing: 1}).then((res) => {
          this.editList = res.data.data.results
          this.editTotal = res.data.data.total
        })
      },
      getStarDiscussionList (starDiscussionPage = 1) {
        let offset = (starDiscussionPage - 1) * this.limit
        console.log(offset)
        api.getStarList(offset, this.limit, 'discussion').then(res => {
          this.starDiscussionList = res.data.data.results
          this.starDiscussionTotal = this.starDiscussionList.length
        })
      },
      getStarProblemList (starProblemPage = 1) {
        let offset = (starProblemPage - 1) * this.limit
        console.log(offset)
        api.getStarList(offset, this.limit, 'problem').then(res => {
          this.starProblemList = res.data.data.results
          this.starProblemTotal = this.starProblemList.length
        })
      },
      handleClick (tab, event) {
        console.log(tab, event)
      },
      getSolvedProblems () {
        let ACMProblems = this.profile.acm_problems_status.problems || {}
        let OIProblems = this.profile.oi_problems_status.problems || {}
        // todo oi problems
        let ACProblems = []
        for (let problems of [ACMProblems, OIProblems]) {
          Object.keys(problems).forEach(problemID => {
            if (problems[problemID]['status'] === 0) {
              ACProblems.push(problems[problemID]['_id'])
            }
          })
        }
        ACProblems.sort()
        this.problems = ACProblems
      },
      goProblem (problemID) {
        this.$router.push({name: 'problem-details', params: {problemID: problemID}})
      },
      goStarProblem (row) {
        this.$router.push({name: 'problem-details', params: {problemID: row.problem._id}})
      },
      goDiscussion (row) {
        this.$router.push({name: 'discussion-details', params: {discussionID: row.id}})
      },
      goStarDiscussion (row) {
        this.$router.push({name: 'discussion-details', params: {discussionID: row.discussion.id}})
      },
      freshProblemDisplayID () {
        api.freshDisplayID().then(res => {
          this.$success('Update successfully')
          this.init()
        })
      },
      formatDate (row, column) {
          // 获取单元格数据
        var data = time.utcToLocal(row[column.property])
        return data
      },
      formatType (row, column) {
          // 获取单元格数据
        var data = this.displayType[row[column.property]]
        return data
      },
      formatStarType (row, column) {
          // 获取单元格数据
        var data = this.displayType[row.discussion.discussion_type]
        return data
      }
    },
    computed: {
      refreshVisible () {
        if (!this.username) return true
        if (this.username && this.username === this.$store.getters.user.username) return true
        return false
      }
    },
    watch: {
      '$route' (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.init()
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    box-shadow: 0 1px 1px 0;
    align-self:center;
  }
  // .problems {
  //   margin-top: 40px;
  //   padding-left: 30px;
  //   padding-right: 30px;
  //   font-size: 18px;
  // }
  .btns {
    margin-top: 15px;
  }
  .problem-btn {
    // display:grid;
    // float: left;
    margin: 2px; 
    border-radius: 5px;
    background-color: #52c7d442
  }
  .emphasis {
    font-size: 20px;
    font-weight: 600;
    align-self:center;
  }

  .mine {
    width:30%;min-height: 500px; 
  }

  .another {
    width:100%;min-height: 500px; 
  }
</style>
